// 处理菜单

import { onMounted, reactive } from "vue";

// 1、定义一个完整的菜单数据

interface IMenu {
    key: string,
    title: string,
    path?: string,
    children?: Array<IMenu>
}

const allMenus: Array<IMenu> = [
    {
        key: "1",
        title: "首页",
        path: "/Admin",
    },
    {
        key: "2",
        title: "轮播图管理",
        children: [
            {
                key: "2-1",
                title: "轮播图列表",
                path: "/Admin/BannerList"
            },
            {
                key: "2-2",
                title: "添加轮播图",
                path: "/Admin/AddBanner"
            }
        ]
    },
    {
        key: "3",
        title: "管理员信息维护",
        children: [
            {
                key: "3-1",
                title: "管理员列表",
                path: "/Admin/AdminList"
            },
            {
                key: "3-2",
                title: "添加管理员",
                path: "/Admin/AddAdmin"
            }
        ]
    },
    {
        key: "4",
        title: "商品管理",
        children: [
            {
                key: "4-1",
                title: "商品列表",
                path: "/Admin/GoodsList"
            },
            {
                key: "4-2",
                title: "商品筛选",
                path: "/Admin/SearchGoods"
            },
        ]
    },
    {
        key: "5",
        title: "地图",
        path: "MyMap"
    },
    {
        key: "6",
        title: "pinia的示例",
        path: "PiniaDemo"
    }
]


// 2、根据该用户的权限（sessionStorage.getItem("checkedKeys")，过滤出对应的菜单项。
// 使用自定义hooks完成。
export function useMenus() {
    // 当前用户的菜单数据
    const currentMenus = reactive<Array<IMenu>>([]);

    onMounted(() => {

        let checkedKeys = JSON.parse(sessionStorage.getItem("checkedKeys") as string);//["1","2","2-2"]

        if (checkedKeys.length == 0) {
            checkedKeys = ["1", "2", "2-1", "2-2", "3", "3-1", "3-2", "4", "4-1", "4-2", "5", "6"];
            // return allmenus;
        }

        //  currentMenus
        // 思路：
        // 1、循环 allMenus，看看每一项的key是否在checkedKeys存在，如果存在，那么就把改菜单项（item）push的到currentMenus。
        // 2、如果该菜单项（item）有children，则给给currentMenus的最后一项增加children属性。并且 还需要循环children，如果children的key在checkedKeys里存在（sonItem）， 那么，
        //      给children里增加菜单项（sonItem）。

        allMenus.forEach(item => {

            // 如果当前菜单项在checkedKeys里存在，那么就把它push到currentMenus;
            if (checkedKeys.includes(item.key)) {//2
                currentMenus.push({ ...item });

                // 2.2）如果有子一级，那么还需要循环子一级菜单（处理子一级）：
                const sonArr: Array<IMenu> = [];
                if (item.children && item.children.length > 0) {

                    item.children.forEach(sonItem => {
                        if (checkedKeys.includes(sonItem.key)) {
                            sonArr.push(sonItem);
                        }
                    })
                }
                currentMenus[currentMenus.length - 1].children = sonArr.length > 0 ? sonArr : undefined;
            }
        });

    })

    return currentMenus;
}